<template>
	<view class="tourism-detail">

		<!-- 景区图片轮播 -->
		<view class="image-swiper">
			<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
				<swiper-item v-for="(item, index) in imageList" :key="index">
					<image :src="item" mode="aspectFill" @click="previewImage(index)"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 基本信息卡片 -->
		<view class="info-card">
			<view class="scenic-header">
				<view class="scenic-title">{{ scenicInfo.title }}</view>
				<view class="action-buttons-inline">
					<view class="ai-guide-btn" @click="aiGuide">
						<uni-icons type="chatbubble" size="16" color="#fff"></uni-icons>
						<text>AI导游</text>
					</view>
					<view class="action-btn-horizontal" @click="openMap">
						<uni-icons type="map-pin-ellipse" size="16" color="#666"></uni-icons>
						<text>导航</text>
					</view>
					<view class="action-btn-horizontal" @click="callPhone">
						<uni-icons type="phone" size="16" color="#666"></uni-icons>
						<text>电话</text>
					</view>
				</view>
			</view>

			<!-- 收藏按钮放在右下角 -->
			<view class="favorite-btn" @click="toggleFavorite">
				<uni-icons :type="isFavorite ? 'heart-filled' : 'heart'" size="20"
					:color="isFavorite ? '#FF6B35' : '#666'"></uni-icons>
				<text>收藏</text>
			</view>

			<view class="scenic-rating">
				<view class="rating-stars">
					<uni-icons v-for="star in 5" :key="star" :type="star <= scenicInfo.rating ? 'star-filled' : 'star'"
						size="16" :color="star <= scenicInfo.rating ? '#FFD700' : '#E0E0E0'"></uni-icons>
				</view>
				<text class="rating-text">{{ scenicInfo.rating }}.0</text>
				<text class="review-count">({{ scenicInfo.reviewCount }}条评价)</text>
			</view>
			<view class="scenic-location">
				<uni-icons type="location" size="14" color="#999"></uni-icons>
				<text>{{ scenicInfo.address }}</text>
			</view>
			<view class="scenic-hours">
				<uni-icons type="clock" size="14" color="#999"></uni-icons>
				<text>开放时间：{{ scenicInfo.openHours }}</text>
			</view>
		</view>

		<!-- 小景点 -->
		<view class="highlights-card">
			<view class="card-title">小景点</view>
			<view class="highlights-grid">
				<view class="highlight-item" v-for="(item, index) in highlightList" :key="index">
					<image :src="item.image" mode="aspectFill"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 景点介绍 -->
		<view class="description-card">
			<view class="card-title">景点介绍</view>
			<view class="description-content">
				<text class="description-text" :class="{ 'expanded': showFullDesc }">{{ scenicInfo.description }}</text>
				<view class="expand-btn" @click="toggleDescription">
					<text>{{ showFullDesc ? '收起' : '展开' }}</text>
					<uni-icons :type="showFullDesc ? 'up' : 'down'" size="14" color="#00A3FF"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 门票信息 -->
		<view class="ticket-card">
			<view class="card-title">
				<uni-icons type="tickets" size="18" color="#00A3FF"></uni-icons>
				<text>门票信息</text>
				<view class="优化显示" style="color: #00A3FF; font-size: 12px; margin-left: auto;">优化显示</view>
			</view>
			<view class="ticket-item" v-for="(item, index) in ticketList" :key="index">
				<view class="ticket-info">
					<view class="ticket-header">
						<text class="ticket-name">{{ item.name }}</text>
						<view class="ticket-badge" v-if="index === 0">推荐</view>
					</view>
					<view class="ticket-desc-container">
						<text class="ticket-desc">{{ item.desc }}</text>
					</view>
					<view class="ticket-features" v-if="item.features">
						<text class="feature-item" v-for="(feature, fIndex) in item.features" :key="fIndex">
							<uni-icons type="checkmarkempty" size="12" color="#00A3FF"></uni-icons>
							{{ feature }}
						</text>
					</view>
				</view>
				<view class="ticket-price">
					<text class="price">¥{{ item.price }}</text>
					<text class="price-unit">起</text>
					<view class="book-btn" @click="bookTicket(item)">立即预订</view>
				</view>
			</view>
		</view>

		<!-- 交通数据 -->
		<view class="transport-card">
			<view class="card-title">交通数据</view>
			<view class="transport-tabs">
				<view class="tab-item" :class="{ active: currentTab === 'bus' }" @click="switchTab('bus')">公交</view>
				<view class="tab-item" :class="{ active: currentTab === 'drive' }" @click="switchTab('drive')">自驾</view>
				<view class="tab-item" :class="{ active: currentTab === 'walk' }" @click="switchTab('walk')">步行</view>
			</view>
			<view class="transport-content">
				<view v-if="currentTab === 'bus'" class="transport-info">
					<text>乘坐公交123路至景区站下车，步行5分钟即可到达</text>
				</view>
				<view v-if="currentTab === 'drive'" class="transport-info">
					<text>导航至"{{ scenicInfo.title }}"，景区内有停车场</text>
				</view>
				<view v-if="currentTab === 'walk'" class="transport-info">
					<text>从市中心步行约2.5公里，预计30分钟</text>
				</view>
			</view>
		</view>

		<!-- 用户评价预览 -->
		<view class="reviews-preview">
			<view class="card-title">
				<text>用户评价</text>
				<text class="more-btn" @click="goReviews">查看全部</text>
			</view>
			<view class="review-item" v-for="(item, index) in previewReviews" :key="index">
				<view class="review-header">
					<image :src="item.avatar" class="user-avatar"></image>
					<view class="user-info">
						<text class="username">{{ item.username }}</text>
						<view class="review-rating">
							<uni-icons v-for="star in 5" :key="star"
								:type="star <= item.rating ? 'star-filled' : 'star'" size="12"
								:color="star <= item.rating ? '#FFD700' : '#E0E0E0'"></uni-icons>
						</view>
					</view>
					<text class="review-date">{{ item.date }}</text>
				</view>
				<text class="review-content">{{ item.content }}</text>
				<view class="review-images" v-if="item.images && item.images.length > 0">
					<image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scenicId: '',
			isFavorite: false,
			showFullDesc: false,
			currentTab: 'bus',
			imageList: [],
			scenicInfo: {
				title: '',
				rating: 0,
				reviewCount: 0,
				address: '',
				openHours: '',
				phone: '',
				description: ''
			},
			highlightList: [],
			ticketList: [],
			previewReviews: []
		}
	},
	onLoad(options) {
		if (options.id) {
			this.scenicId = options.id;
			this.loadScenicDetail();
		}
	},
	methods: {
		loadScenicDetail() {
			// 加载景点详情数据
			console.log('加载景点详情:', this.scenicId);

			// 模拟从API获取数据
			const scenicDetails = {
				'1': {
					title: '加榜梯田',
					rating: 5,
					reviewCount: 2356,
					address: '贵州省黔东南苗族侗族自治州从江县加榜乡',
					openHours: '全天开放',
					phone: '0855-6123456',
					description: '加榜梯田位于贵州省黔东南苗族侗族自治州从江县加榜乡，是中国最美的梯田之一。这里的梯田层层叠叠，蜿蜒盘旋，随着季节变化呈现不同的景色：春天水满田畴，倒映蓝天；夏天绿意盎然；秋天金黄遍野；冬天银装素裹。加榜梯田不仅是农业文化的杰作，也是侗族人民智慧的结晶，被誉为"中国最后的秘境"。',
					images: [
						'https://cdn.xryai.cn/picGo/20250909164832442.jpg',
						'https://cdn.xryai.cn/picGo/20250909164832443.jpg',
						'https://cdn.xryai.cn/picGo/20250909164832444.jpg'
					],
					highlights: [
						{ name: '梯田观景台', image: 'https://cdn.xryai.cn/picGo/20250909164832442.jpg' },
						{ name: '侗寨风情', image: 'https://cdn.xryai.cn/picGo/20250909164832443.jpg' },
						{ name: '梯田日出', image: 'https://cdn.xryai.cn/picGo/20250909164832444.jpg' },
						{ name: '梯田文化', image: 'https://cdn.xryai.cn/picGo/20250906183711873.png' }
					],
					tickets: [
						{
							name: '加榜梯田门票',
							desc: '含景区大门票',
							price: 60
						},
						{
							name: '加榜梯田+侗寨体验',
							desc: '含门票及侗寨体验',
							price: 100
						}
					],
					reviews: [
						{
							username: '风光摄影师',
							avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=photographer1&backgroundColor=ffd93d',
							rating: 5,
							date: '2023-11-15',
							content: '加榜梯田的景色太震撼了！层层叠叠的梯田，云雾缭绕，日出和日落时分尤其美丽。是摄影的绝佳地点，强烈推荐！',
							images: ['https://cdn.xryai.cn/picGo/20250909164832442.jpg']
						},
						{
							username: '文化探索者',
							avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=culture1&backgroundColor=ffdfbf',
							rating: 5,
							date: '2023-10-28',
							content: '不仅有壮观的梯田景观，当地侗族的风俗文化也很有特色。住在侗寨里，体验了传统的长桌宴，非常难忘。建议春季或秋季前往，景色最美。',
							images: ['https://cdn.xryai.cn/picGo/20250909164832443.jpg', 'https://cdn.xryai.cn/picGo/20250909164832444.jpg']
						}
					]
				},
				'2': {
					title: '肇兴侗寨',
					rating: 5,
					reviewCount: 2845,
					address: '贵州省黔东南苗族侗族自治州黎平县肇兴镇',
					openHours: '08:00-18:00',
					phone: '0855-6234567',
					description: '肇兴侗寨是中国最大、最完整的侗族村寨之一，被誉为"侗乡明珠"。始建于宋代，距今已有800多年历史，是中国传统村落和国家5A级旅游景区。寨内保存着完整的侗族建筑群，包括鼓楼、风雨桥、戏台等传统建筑，以及独特的"寨老"制度和侗族文化习俗。肇兴侗寨的建筑多为木质结构，不用一钉一铆，体现了侗族人民的智慧和建筑技艺。',
					images: [
						'https://cdn.xryai.cn/picGo/20250909171025691.jpg',
						'https://cdn.xryai.cn/picGo/20250909171025689.jpg',
						'https://cdn.xryai.cn/picGo/20250906183757460.png'
					],
					highlights: [
						{ name: '鼓楼', image: 'https://cdn.xryai.cn/picGo/20250909171025689.jpg' },
						{ name: '风雨桥', image: 'https://cdn.xryai.cn/picGo/20250909171025690.jpg' },
						{ name: '戏台', image: 'https://cdn.xryai.cn/picGo/20250909171025689.jpg' }
					],
					tickets: [
						{
							name: '肇兴侗寨门票',
							desc: '含景区大门票',
							price: 80
						},
						{
							name: '肇兴侗寨+歌舞表演',
							desc: '含门票及侗族歌舞表演',
							price: 120
						}
					],
					reviews: [
						{
							username: '建筑爱好者',
							avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=architect1&backgroundColor=a8e6cf',
							rating: 5,
							date: '2023-09-15',
							content: '肇兴侗寨的建筑太精美了！鼓楼、风雨桥都是不用一钉一铆建成的，体现了侗族人民的智慧。整个村寨依山而建，层次分明，非常壮观。',
							images: ['https://cdn.xryai.cn/picGo/20250909171025690.jpg']
						},
						{
							username: '民俗研究者',
							avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=folklorist1&backgroundColor=f8b195',
							rating: 5,
							date: '2023-08-28',
							content: '在肇兴侗寨住了两天，体验了侗族大歌和长桌宴，非常震撼。当地人热情好客，文化保存得很好。建议多住几天，慢慢体验侗族文化的魅力。',
							images: ['https://cdn.xryai.cn/picGo/20250909171025690.jpg', 'https://cdn.xryai.cn/picGo/20250909171025689.jpg']
						}
					]
				},
				'3': {
					title: '高过河漂流',
					rating: 4,
					reviewCount: 1856,
					address: '贵州省黔东南苗族侗族自治州从江县高增乡',
					openHours: '09:00-16:00（季节性开放）',
					phone: '0855-6345678',
					description: '高过河漂流位于贵州省黔东南苗族侗族自治州从江县高增乡，是中国最美的峡谷漂流之一。高过河水质清澈，两岸峭壁耸立，植被茂密，景色秀丽。漂流全程约10公里，落差近百米，有惊险刺激的急流险滩，也有平缓舒适的缓流段，适合不同层次的游客体验。沿途可欣赏到原始森林、峡谷奇观和少数民族村寨，是夏季避暑和亲水的理想去处。',
					images: [
						'https://cdn.xryai.cn/picGo/20250909170504081.jpg',
						'https://cdn.xryai.cn/picGo/20250909170504080.jpg',
						'https://cdn.xryai.cn/picGo/20250909170504079.jpg',
						'https://cdn.xryai.cn/picGo/20250909170504078.jpg'
					],
					highlights: [
						{ name: '激流段', image: 'https://cdn.xryai.cn/picGo/20250909170504081.jpg' },
						{ name: '峡谷风光', image: 'https://cdn.xryai.cn/picGo/20250909170504079.jpg' },
						{ name: '跳水台', image: 'https://cdn.xryai.cn/picGo/20250909170504078.jpg' },
						{ name: '休闲段', image: 'https://cdn.xryai.cn/picGo/20250909170504080.jpg' }
					],
					tickets: [
						{
							name: '高过河漂流票',
							desc: '含漂流装备及保险',
							price: 120
						},
						{
							name: '高过河漂流+烧烤',
							desc: '含漂流及岸边烧烤',
							price: 180
						}
					],
					reviews: [
						{
							username: '户外达人',
							avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=outdoor1&backgroundColor=88d8a6',
							rating: 5,
							date: '2023-07-15',
							content: '高过河漂流太刺激了！水流湍急但很安全，教练专业负责。峡谷景色美不胜收，水质清澈见底。夏天来非常舒服，强烈推荐！',
							images: ['https://cdn.xryai.cn/picGo/20250909170504080.jpg']
						},
						{
							username: '亲子游玩家',
							avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=family1&backgroundColor=ffeaa7',
							rating: 4,
							date: '2023-06-28',
							content: '带孩子来体验，选择了难度较低的路线，很适合家庭游玩。服务很周到，设施也很完善。唯一不足是旺季人太多，建议错峰出行。',
							images: ['https://cdn.xryai.cn/picGo/20250909170504081.jpg', 'https://cdn.xryai.cn/picGo/20250909170504079.jpg']
						}
					]
				},
				'4': {
					title: '西江千户苗寨',
					rating: 5,
					reviewCount: 3245,
					address: '贵州省黔东南苗族侗族自治州雷山县西江镇',
					openHours: '08:00-18:00',
					phone: '0855-32376222',
					description: '西江千户苗寨是中国最大的苗族聚居村寨，有"中国第一苗寨"之称。这里保存着完整的苗族"原始生态"文化，是领略和认识中国苗族漫长历史与发展的绝佳去处。西江千户苗寨是一个保存苗族"原始生态"文化完整的地方，由10余个依山而建的自然村寨相连成片，是目前中国乃至全世界最大的苗族聚居村寨。这里的苗族银饰、刺绣、木鼓舞等非物质文化遗产保存完好，是体验苗族文化的最佳地点。',
					images: [
						'https://cdn.xryai.cn/picGo/20250909171447248.jpg',
						'https://cdn.xryai.cn/picGo/20250909171447247.jpg',
						'https://cdn.xryai.cn/picGo/20250909171447246.jpg'
					],
					highlights: [
						{ name: '吊脚楼群', image: 'https://cdn.xryai.cn/picGo/20250909171447248.jpg' },
						{ name: '银饰博物馆', image: 'https://cdn.xryai.cn/picGo/20250909171447246.jpg' },
						{ name: '观景台', image: 'https://cdn.xryai.cn/picGo/20250909171447247.jpg' },
						{ name: '苗族歌舞', image: 'https://cdn.xryai.cn/picGo/20250906183525831.png' }
					],
					tickets: [
						{
							name: '西江千户苗寨门票',
							desc: '含景区大门票',
							price: 100
						},
						{
							name: '西江千户苗寨+歌舞表演',
							desc: '含门票及苗族歌舞表演',
							price: 150
						}
					],
					reviews: [
						{
							username: '民族文化爱好者',
							avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=culture2&backgroundColor=fab1a0',
							rating: 5,
							date: '2023-11-15',
							content: '西江千户苗寨的夜景太美了！满山的灯光，如繁星点点，非常壮观。苗族姑娘的银饰也很精美，值得一看。',
							images: ['https://cdn.xryai.cn/picGo/20250906183711873.png']
						},
						{
							username: '摄影师小王',
							avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=photographer2&backgroundColor=81ecec',
							rating: 4,
							date: '2023-10-28',
							content: '这里是摄影的天堂，晨雾中的苗寨，层层叠叠的吊脚楼，非常有特色。建议住一晚，感受真正的苗族文化。',
							images: ['https://cdn.xryai.cn/picGo/20250906183757460.png', 'https://cdn.xryai.cn/picGo/20250906183344240.jpg']
						}
					]
				},
				'5': {
					title: '镇远古镇',
					rating: 5,
					reviewCount: 2780,
					address: '贵州省黔东南苗族侗族自治州镇远县',
					openHours: '全天开放',
					phone: '0855-7231111',
					description: '镇远古镇是国家5A级旅游景区，有着2000多年历史，是贵州保存最为完好的古镇之一。古镇依山傍水，舞阳河绕城而过，形成"一江两岸三山四街"的独特格局。镇远古镇保存了大量明清时期的古建筑，如青龙洞、文庙、铁溪城墙等。夜晚华灯初上，古镇灯火璀璨，倒映在河水中，如诗如画，被誉为"中国最美的小城"。',
					images: [
						'https://cdn.xryai.cn/picGo/20250909170228537.jpg',
						'https://cdn.xryai.cn/picGo/20250909170228536.jpg',
						'https://cdn.xryai.cn/picGo/20250909170228535.jpg',
						'https://cdn.xryai.cn/picGo/20250909170228534.jpg',
					],
					highlights: [
						{ name: '青龙洞', image: 'https://cdn.xryai.cn/picGo/20250909170228534.jpg' },
						{ name: '舞阳河夜景', image: 'https://cdn.xryai.cn/picGo/20250909170228537.jpg' },
						{ name: '文庙', image: 'https://cdn.xryai.cn/picGo/20250909170228535.jpg' },
						{ name: '铁溪城墙', image: 'https://cdn.xryai.cn/picGo/20250909170228536.jpg' }
					],
					tickets: [
						{
							name: '镇远古镇联票',
							desc: '含古镇内主要景点门票',
							price: 80
						},
						{
							name: '镇远古镇+夜游船票',
							desc: '含联票及夜游舞阳河船票',
							price: 120
						}
					],
					reviews: [
						{
							username: '历史文化爱好者',
							avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=history1&backgroundColor=fd79a8',
							rating: 5,
							date: '2023-10-15',
							content: '镇远古镇的历史底蕴非常深厚，古建筑保存完好。夜晚的舞阳河两岸灯火辉煌，美不胜收。强烈推荐夜游舞阳河，绝对是一种享受！',
							images: ['https://cdn.xryai.cn/picGo/20250909170228537.jpg']
						},
						{
							username: '旅行达人',
							avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=traveler2&backgroundColor=74b9ff',
							rating: 5,
							date: '2023-09-28',
							content: '这里比凤凰古城、丽江古城商业化程度低，更有原汁原味的古镇风貌。青龙洞的建筑群非常壮观，值得细细品味。建议住两晚，慢慢体验古镇的魅力。',
							images: ['https://cdn.xryai.cn/picGo/20250909170228536.jpg', 'https://cdn.xryai.cn/picGo/20250909170228535.jpg']
						}
					]
				}
			};

			// 根据ID获取景点详情
			const detail = scenicDetails[this.scenicId];
			if (detail) {
				this.scenicInfo = {
					title: detail.title,
					rating: detail.rating,
					reviewCount: detail.reviewCount,
					address: detail.address,
					openHours: detail.openHours,
					phone: detail.phone,
					description: detail.description
				};
				this.imageList = detail.images;
				this.highlightList = detail.highlights;
				this.ticketList = detail.tickets;
				this.previewReviews = detail.reviews;
			}
		},


		//////////////////////////////////////
		goBack() {
			// 返回到景区列表页面
			try {
				uni.navigateBack({
					delta: 1,
					success: function () {
						console.log('返回成功');
					},
					fail: function () {
						// 如果返回失败，直接跳转到景区列表页面
						uni.redirectTo({
							url: '/pages/tourism/list/index'
						});
					}
				});
			} catch (error) {
				console.error('返回失败:', error);
				// 备用方案：直接跳转到景区列表页面
				uni.redirectTo({
					url: '/pages/tourism/list/index'
				});
			}
		},
		aiGuide() {
			uni.showToast({
				title: 'AI导游功能',
				icon: 'none'
			});
		},
		previewImage(index) {
			uni.previewImage({
				urls: this.imageList,
				current: index
			});
		},
		shareScenic() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				href: `pages/tourism/detail/index?id=${this.scenicId}`,
				title: this.scenicInfo.title,
				summary: this.scenicInfo.description.substring(0, 50),
				imageUrl: this.imageList[0]
			});
		},
		toggleFavorite() {
			this.isFavorite = !this.isFavorite;
			uni.showToast({
				title: this.isFavorite ? '收藏成功' : '取消收藏',
				icon: 'none'
			});
		},
		openMap() {
			uni.openLocation({
				latitude: 29.7,
				longitude: 120.2,
				name: this.scenicInfo.title,
				address: this.scenicInfo.address
			});
		},
		callPhone() {
			uni.makePhoneCall({
				phoneNumber: this.scenicInfo.phone
			});
		},
		goReviews() {
			uni.navigateTo({
				url: '/pages/tourism/reviews/index?id=' + this.scenicInfo.id
			});
		},
		switchTab(tab) {
			this.currentTab = tab;
		},
		toggleDescription() {
			this.showFullDesc = !this.showFullDesc;
		},
		bookTicket(item) {
			// 跳转到预订页面，传递景区ID和门票信息
			uni.navigateTo({
				url: `/pages/tourism/booking/index?id=${this.scenicId}&ticketName=${item.name}&ticketPrice=${item.price}`
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.tourism-detail {
	background: #f8f8f8;
	min-height: 100vh;
}


.image-swiper {
	height: 250px;

	.swiper {
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}
}

.info-card,
.highlights-card,
.description-card,
.ticket-card,
.transport-card,
.reviews-preview {
	background: white;
	margin: 10px 15px;
	border-radius: 12px;
	padding: 15px;
}

.ticket-card {
	padding: 25px 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	margin: 15px;
}

.scenic-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 15px;
	position: relative;

	.scenic-title {
		font-size: 20px;
		font-weight: 600;
		color: #333;
		flex: 1;
		margin-right: 10px;
	}
}

.action-buttons-inline {
	display: flex;
	gap: 8px;
	align-items: center;

	.ai-guide-btn {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 6px 12px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 15px;
		font-size: 12px;
		color: #fff;
		font-weight: 500;
		box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);

		text {
			color: #fff;
		}
	}

	.action-btn-horizontal {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 6px 10px;
		background: #f8f8f8;
		border-radius: 12px;
		border: 1px solid #e8e8e8;

		text {
			font-size: 12px;
			color: #666;
		}

		&:active {
			background: #f0f0f0;
		}
	}
}

.favorite-btn {
	position: absolute;
	bottom: 15px;
	right: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px;
	background: #f8f8f8;
	border-radius: 12px;
	border: 1px solid #e8e8e8;

	text {
		font-size: 10px;
		color: #666;
	}

	&:active {
		background: #f0f0f0;
	}
}

.scenic-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;

	.rating-stars {
		display: flex;
		gap: 2px;
	}

	.rating-text {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.review-count {
		font-size: 14px;
		color: #999;
	}
}

.scenic-location,
.scenic-hours {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;

	text {
		font-size: 14px;
		color: #666;
	}
}

.card-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin-bottom: 20px;
	padding-bottom: 8px;
	border-bottom: 2px solid #f0f0f0;
	
	.more-btn {
		font-size: 14px;
		color: #00A3FF;
		font-weight: normal;
	}
}

.highlights-grid {
	display: flex;
	gap: 15px;
	overflow-x: auto;

	.highlight-item {
		position: relative;
		width: 120px;
		height: 80px;
		border-radius: 12px;
		overflow: hidden;
		flex-shrink: 0;

		image {
			width: 100%;
			height: 100%;
			border-radius: 12px;
		}

		text {
			position: absolute;
			bottom: 8px;
			left: 8px;
			font-size: 14px;
			color: #fff;
			font-weight: 500;
			text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
			z-index: 2;
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 40px;
			background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
			z-index: 1;
		}
	}
}

.description-content {
	.description-text {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;

		&.expanded {
			-webkit-line-clamp: unset;
			overflow: visible;
		}
	}

	.expand-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		margin-top: 10px;
		color: #00A3FF;
		font-size: 14px;
	}
}

.ticket-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 25px 0;
	border-bottom: 1px solid #f0f0f0;

	&:last-child {
		border-bottom: none;
	}

	.ticket-info {
		flex: 1;
		margin-right: 20px;
		
		.ticket-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 8px;
			
			.ticket-name {
				font-size: 18px;
				font-weight: 600;
				color: #333;
				line-height: 1.4;
				flex: 1;
			}
			
			.ticket-badge {
				background: linear-gradient(135deg, #FF6B35, #FF8A50);
				color: white;
				font-size: 10px;
				padding: 2px 8px;
				border-radius: 10px;
				font-weight: 500;
			}
		}
		
		.ticket-desc-container {
			margin-bottom: 8px;
			
			.ticket-desc {
				font-size: 13px;
				color: #999;
				line-height: 1.6;
				display: block;
				max-width: 220px;
				word-wrap: break-word;
				word-break: normal;
				white-space: normal;
			}
		}
		
		.ticket-features {
			display: flex;
			flex-direction: column;
			gap: 4px;
			
			.feature-item {
				display: flex;
				align-items: center;
				gap: 4px;
				font-size: 11px;
				color: #666;
				line-height: 1.3;
			}
		}
	}

	.ticket-price {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		gap: 12px;
		min-width: 120px;
		flex-shrink: 0;
		
		.price {
			font-size: 22px;
			font-weight: 700;
			color: #FF6B35;
			line-height: 1;
		}
		
		.price-unit {
			font-size: 12px;
			color: #999;
			margin-top: -8px;
			margin-bottom: 4px;
		}

		.book-btn {
			background: linear-gradient(135deg, #00A3FF, #0088CC);
			color: white;
			padding: 12px 24px;
			border-radius: 25px;
			font-size: 15px;
			font-weight: 600;
			box-shadow: 0 3px 12px rgba(0, 163, 255, 0.3);
			transition: all 0.3s ease;
			white-space: nowrap;
			min-width: 90px;
			text-align: center;
			letter-spacing: 0.5px;
			
			&:active {
				transform: translateY(1px);
				box-shadow: 0 2px 8px rgba(0, 163, 255, 0.4);
			}
			
			&:hover {
				background: linear-gradient(135deg, #0088CC, #006699);
				box-shadow: 0 4px 16px rgba(0, 163, 255, 0.4);
			}
		}
	}
}

// 响应式优化 - 小屏幕适配
@media screen and (max-width: 375px) {
	.ticket-item {
		padding: 20px 0;
		
		.ticket-info {
			margin-right: 15px;
			
			.ticket-header {
				.ticket-name {
					font-size: 16px;
				}
				
				.ticket-badge {
					font-size: 9px;
					padding: 1px 6px;
				}
			}
			
			.ticket-desc-container {
				.ticket-desc {
					font-size: 12px;
					max-width: 180px;
				}
			}
			
			.ticket-features {
				.feature-item {
					font-size: 10px;
				}
			}
		}
		
		.ticket-price {
			min-width: 100px;
			
			.price {
				font-size: 20px;
			}
			
			.price-unit {
				font-size: 11px;
			}
			
			.book-btn {
				padding: 10px 18px;
				font-size: 14px;
				min-width: 80px;
			}
		}
	}
	
	.ticket-card {
		margin: 10px;
		padding: 20px 15px;
	}
}

.transport-tabs {
	display: flex;
	margin-bottom: 15px;

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 10px 0;
		font-size: 14px;
		color: #666;
		border-bottom: 2px solid transparent;

		&.active {
			color: #00A3FF;
			border-bottom-color: #00A3FF;
		}
	}
}

.transport-info {
	font-size: 14px;
	color: #666;
	line-height: 1.5;
}

.review-item {
	padding: 15px 0;
	border-bottom: 1px solid #f0f0f0;

	&:last-child {
		border-bottom: none;
	}

	.review-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;

		.user-avatar {
			width: 40px;
			height: 40px;
			border-radius: 20px;
			margin-right: 10px;
		}

		.user-info {
			flex: 1;

			.username {
				font-size: 14px;
				color: #333;
				display: block;
				margin-bottom: 2px;
			}

			.review-rating {
				display: flex;
			}
		}

		.review-date {
			font-size: 12px;
			color: #999;
		}
	}

	.review-content {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
		margin-bottom: 10px;
	}

	.review-images {
		display: flex;

		image {
			width: 60px;
			height: 60px;
			border-radius: 6px;
			margin-right: 10px;
		}
	}
}
</style>